<template>
  <cjui-loading-progress
    class="cjui-echart"
    :loading="loading"
    :loadingIcon="EchartLoading"
    modal="full"
  >
    <cjui-empty v-show="!loading && noData" :description="' '" />
    <EchartPure v-if="!loading && !noData" :theme="theme" :options="options" :events="events" :key="theme" />
    <slot></slot>
  </cjui-loading-progress>
</template>

<script lang="ts" setup>
import EchartPure from './src/EchartPure.vue'
import EchartLoading from './src/EchartLoading.vue'
import { ChartProps } from './types'
import { useThemeColorVars } from './utils/hooks'
import './plugins/theme/index'
import './plugins/map/index'

defineOptions({
  name: 'CjuiEchart'
})

const props = withDefaults(defineProps<ChartProps>(), {
  loading: false,
  noData: true,
  theme: '',
  options: () => {},
  events: () => {},
})

const { theme } = useThemeColorVars(props.theme)
</script>
